<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
    Document   : ExamPage.xhtml
    Created on : 1st April2014
    Author     :Ihab Ali
-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:f="http://java.sun.com/jsf/core">
     

    <body>

        <ui:composition template="./WEB-INF/templates/template.xhtml">

            <ui:define name="content">
               <h:form rendered="#{login.loggedIn == false}" >
                   <h2>#{messages.messageNotAuthintecated}</h2>
                <h:commandButton action="/index?faces-redirect=true"
                                 value="#{messages.loginLabel}" />
              </h:form>
                
                <p:accordionPanel id="main" multiple="true" rendered="#{login.loggedIn and listControl.questionsPopulated}">
                  
                    <p:tab title="#{messages.questionLabel}" >
                       
                        <p:panel>
                            <h:form id="examForm">
                                <p:outputLabel id="questionString" value="#{listControl.currentQuestion.question}" />
                                <p:selectOneRadio id="distractors" value="#{listControl.currentQuestion.savedanswer}"   > 
                                    <f:selectItems  id="choices" value="#{listControl.currentQuestion.distractorsMap}"   /> 
                                    <p:ajax  update=":main:slider" />
                                </p:selectOneRadio>
                                
                                <p:panelGrid columns="3">
                                    <p:commandButton id="previousQ"  disabled="true"  value="#{messages.Previous}" update="examForm"
                                                 action="#{listControl.returnToPrevious()}"/>
                                 
                                    <p:commandButton id="nextQ"  value="#{messages.Next}" update="examForm" 
                                                 action="#{listControl.advanceToNext()}" />
                                
                                    <p:commandButton id="GradeButton"  disabled="true" value="#{messages.Grade}" update="examForm"  
                                                 action="#{listControl.goToGradePage()}"/>
                                </p:panelGrid>
                            </h:form>
                        </p:panel>
                       
                    </p:tab>
                    
                    
                    <p:tab id="status" title="#{messages.statusLabel}">
                        <h:form id="stopWatch">
                            <p:growl id="expired"  /> 
                            <h:outputText id="display" value="${listControl.examModel.swm}"  />
                            <p:poll autoStart="true"
                                    interval="1"
                                    listener="#{listControl.handleTimer()}"
                                    update="stopWatch"/>
                        </h:form>
                        
                        <h:form id="slider">
                        <h:inputHidden id="hidden" value="#{listControl.progress}"  >
                            <p:slider  maxValue="#{listControl.progressMax}"
                                       for="hidden"
                                       disabled="true" 
                                       displayTemplate="#{value}"
                                       style="width: 150px;"
                                       />
                         </h:inputHidden>
                        </h:form>
                    </p:tab>

                </p:accordionPanel>
               
                <p:commandButton value="#{messages.LogOut}"  action="#{listControl.logOut()}" />
                
            </ui:define>
        </ui:composition>
    </body>
</html>
